
const echartsrender = {
    map:function(args){//标准地图
        var defaultargs = {//地图默认配置
            mapType:'china',
            geo_itemStyle:{//地图区域和边框颜色
                normal: {
                    areaColor: '#114181',
                    borderColor: '#1DACE4',
                    borderWidth:2
                },
                emphasis: {
                    areaColor: '#F7B61C'
                }
            },
            itemStyle:{//地图区域和边框颜色
                normal: {
                    areaColor: '#114181',
                    borderColor: '#1DACE4',
                    borderWidth:1
                },
                emphasis: {
                    areaColor: '#F7B61C'
                }
            },
            visualMap_color:['#0B1E50','#346FCA',],//地图渐变颜色
        }
        this.mapType = args.mapType ? args.mapType : defaultargs.mapType;//地图类型
        this.data = args.data ? args.data : [];//地图数据
        this.geo_itemStyle = args.geo_itemStyle ? args.geo_itemStyle : defaultargs.geo_itemStyle;
        this.itemStyle = args.itemStyle ? args.itemStyle : defaultargs.itemStyle;//地图区域和边框颜色
        this.legend_data = args.legend_data || [];//图例组件数据
        this.visualMap_color = args.visualMap_color || defaultargs.visualMap_color;//地图渐变颜色
        this.series_name = args.series_name || '';
        this.title = args.title ||'';
        var option = {
            tooltip: {
                trigger: 'item'
            },
            title:{
                text: this.title,
                left: 'center',
                top: '20%',
                textStyle: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 20
                }
            },
            legend: {
                bottom:'10%',
                // orient: 'vertical',
                left: 'left',
                data:this.legend_data
            },
            visualMap: {
                type:'continuous',
                min:0,
                bottom: '10%',
                left: 'left',
                text:['高','低'],
                color: this.visualMap_color,
                orient: 'horizontal',
                calculable: true,
                textStyle:{
                    color:'rgba(255,255,255,0.7)'
                }
            },
            toolbox: {
                show: false,
            },
            series: [
                {
                    name: this.series_name ,
                    type: 'map',
                    mapType: this.mapType,
                    roam: false,
                    showLegendSymbol: false,//不显示小点
                    itemStyle:this.itemStyle,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:this.data
                }
            ]
        }
        return option;
    },
    portbar:function(args){//纵向柱状图
      this.legend_data = args.legend_data || [];//图例组件数据
      this.xAxis_data = args.xAxis_data || [];//x 轴数据
      this.series = args.series || [];//系列列表
      var option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: "axis",
            padding: [8, 10],
            backgroundColor: 'rgba(0,0,0,0)',
            axisPointer: {
                type: "shadow",
                textStyle: {
                    color: "#fff"
                }
            }
        },
        title:{
            text: '人均筹资标准',
            left: '2%',
            top: '0',
            textStyle: {
                align: 'center',
                color: '#4DCEF8',
                fontSize: 14
            }
        },
        legend: {
            data: this.legend_data ,
            align: 'left',
            bottom: 20,
            right: 'center',
            textStyle: {
                color: "#CDD0D0",
                // fontSize: 14,
            },
            itemWidth: 18,
            itemHeight: 6,
            itemGap: 35
        },
        grid: {
            left: '6%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            offset: 10,
            data: this.xAxis_data,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,0.7)",
                    fontSize: 14,
                }
            },
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,0.7)",
                    fontSize: 14,
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3256'
                }
            }
        }],
        series: this.series
      };
      return option;
    },
    hxbar: function(args) {//横向堆叠柱状图
      this.legend_data = args.legend_data || [];//图例组件数据
      this.yAxis_data = args.yAxis_data || [];//y 轴数据
      this.series = args.series || [];//系列列表
      this.title = args.title ||'';
      var option = {
        title:{
            text: this.title,
            left: '3%',
            top: '0',
            textStyle: {
                align: 'center',
                color: '#4DCEF8',
                fontSize: 14
            }
        },
        legend: {
            data: this.legend_data,
            bottom:'0',
            textStyle: {
                color: '#ccc'
            },
            left: '7%',
            itemWidth: 18,
            itemHeight: 6,
            itemGap: 25
        },
        grid: {
            containLabel: true,
            top:'10%',
            left: '0%',
            right: '5%',
            bottom: '10%',
            borderColor:'#296C89',
            borderWidth:1,
        },
        tooltip: {
            show: true,
            backgroundColor: '#fff',
            borderColor: '#ddd',
            borderWidth: 1,
            textStyle: {
                color: '#3c3c3c',
                fontSize: 16
            },
            // formatter: function(p) {
            //     var _arr = p.seriesName.split('/'),
            //     idx = p.seriesIndex;//1，2，3
            //     return '名称：' + p.seriesName + '<br>' + '完成：' + p.value + '<br>' + '占比：' + (p.value / _max * 100).toFixed(0) + '%';
            // },
            extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
        },
        xAxis: {
            splitNumber: 10,
            // interval: _max / spNum,
            max: 100,
            boundaryGap: false,//取消两端间隙
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
            splitLine: {
                show: false,
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: 'rgba(255,255,255,0.7)',
                    margin: 15,
                },
                formatter: function(v) {
                    var _v = (v / 100 * 100).toFixed(0);
                    return _v == 0 ? _v : _v + '%';
                }
            },
            axisTick: {
                show: false,
            }
        },
        yAxis: [{
            data: this.yAxis_data,
            boundaryGap: true,//取消两端间隙
            position: 'left',
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                onZero: false,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: 'rgba(255,255,255,0.7)',

                },
            },
            axisTick: {
                show: false,
            }
        }, {
            data: this.yAxis_data,
            boundaryGap: true,//取消两端间隙
            position:'right',
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                onZero: false,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false,
            }
        }, {
            show: false,
            data: this.y_data,
            axisLine: {
                show: false
            }
        }],
        series: this.series
      };

      return option;
    },

    line:function (args) {  //折线图
      this.title = args.title || '';//标题
      this.xAxisdata = args.xAxisdata ? args.xAxisdata : [];//x 轴数据
      this.unit = args.unit ? args.unit : '';
      this.series = args.series ? args.series : [];//系列列表
      this.color = args.color ? args.color : [];
      this.mindata = args.mindata ? args.mindata : 0;
      this.maxdata = args.maxdata ? args.maxdata : 'dataMax';
      this.legenddata = args.legendata ? args.legendata :[];//图例组件数据
      this.legendselected = args.legendselected ? args.legendselected : {};
      var option = {
        title:{
            text: this.title,
            top: '0',
            left: 'center',
            textStyle: {
                align: 'center',
                color: 'rgba(255,255,255,0.7)',
                fontSize: 14
            }
        },
        legend: {
          type:'scroll',
          x: 'center',
          top: '2%',
          textStyle: {
            color: '#ffd285',
          },
          selected:this.legendselected,
          data: this.legenddata
        },
        grid: {
          show:true,
          top:'13%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true,
          borderColor:'#296C89',
          borderWidth:1,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            label: {
              show: true,
              backgroundColor: '#333'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisdata,
          boundaryGap: false,//取消两端间隙
          axisLine: {
            show: true,
            lineStyle:{
              color:'#4EB5D6',
              type:'solid',
              width:1
            }
          },
          axisTick: {
            show: false
          },
          //  改变x轴字体颜色和大小
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.7)'
            },
            interval: 'auto',
            // formatter: '{value} '
          }
        },
        yAxis: {
          type: 'value',
          name: this.unit,
          nameTextStyle: {
            color: '#bacbe7'
          },
          splitNumber: 3,
          axisLine: {
            show: false
          },
          min: this.mindata,
          max: this.maxdata,
          //  改变x轴字体颜色和大小
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.7)'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#39517D'
            }
          },
          axisLine: {
            show: true,
            lineStyle:{
              color:'#4EB5D6',
              type:'solid',
              width:1
            }
          },
          axisTick:{
            show:false
          }
        },
        color:this.color,
        series: this.series
      };
      return option;
    },
    lineandbar:function(args){//折现混合柱状图
      this.xAxisdata = args.xAxisdata ? args.xAxisdata : [];//x 轴数据
      this.legenddata = args.legendata ? args.legendata :[];//图例组件数据
      this.mindata = args.mindata ? args.mindata : 0;
      this.maxdata = args.maxdata ? args.maxdata : 'dataMax';
      this.minlinedata = args.minlinedata ? args.minlinedata : 0;
      this.maxlinedata = args.maxlinedata ? args.maxlinedata : 'dataMax';
      this.series = args.series ||[] ;//系列列表
      this.title = args.title ||'';
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            label: {
              show: true,
              backgroundColor: '#333'
            }
          }
        },
        title:{
            text: this.title,
            left: 15,
            top: '0',
            textStyle: {
                align: 'center',
                color: '#4DCEF8',
                fontSize: 14
            }
        },
        grid: {
            top: '12%',
            left: '1%',
            right: '0',
            bottom: '8%',
            containLabel: true
        },
          tooltip: {
                    trigger: 'axis',
                    formatter:'{a}:{c}',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
        legend: {
            bottom: 0,
            data: this.legenddata,
            textStyle: {
                color: '#CDD0D0',
            },
            itemWidth: 18,
            itemHeight: 6,
            itemGap: 35
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,//显示两端间隙
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                  color: '#0ec1ff'
              },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
              textStyle: {
                  color: 'rgba(255,255,255,0.7)',
                  margin: 15,
              },
          },
          axisTick: {
              show: false,
          },
          data: this.xAxisdata,
        }],
        yAxis: [{
            type: 'value',
            min: this.mindata,
            max: this.maxdata,
            splitNumber: 5,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3256'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#0ec1ff'
                },
            },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: 'rgba(255,255,255,0.7)',

                },
            },
            axisTick: {
                show: false,
            }
        },{
            type: 'value',
            min: this.minlinedata,
            max: this.maxlinedata,
            // splitNumber: 5,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#0a3256'
                }
            },
            axisLine: {
                show: true,
                onZero: false,
                lineStyle: {
                    color: '#0ec1ff'
                    
                },
            },
            axisLabel: {
                color: 'rgba(0,0,0,0)'
            },
            axisTick: {
                show: false,
            }
        }],
        series: this.series
      }
      return option;
    }
}

export default echartsrender;
